import React, { Component } from 'react'
import { Result, Tag, Image, Spin, Button, message } from 'antd';
import ProTable from '@ant-design/pro-table';
import { PlusOutlined } from '@ant-design/icons';
import MusicAPI from '@/services/ant-design-pro/music'
import EditModel from './Edit'
import AddModel from './add'
import No_head from '@/assets/image/no_head.jpg'

import m_config from '@/config/config'
const { findMusicByids, updateSongList } = MusicAPI;
import './index.less'
class Detail extends Component {

    constructor(props) {
        super(props)
        this.state = {
            listData: undefined,
            curState: {
                infoMore: false,
                loading: true,
                EditVisible: false,
                AddVisible: false,
            }
        }
    }

    componentDidMount() {
        this.setSonglistData();
        this.Loading();
    }
    componentDidUpdate(prevProps) {
        const { data } = this.props;

        if (JSON.stringify(prevProps.data && prevProps.data.music_ids) !==
            JSON.stringify(data && data.music_ids)) {
            this.setCurState({
                loading: true
            })
            this.setSonglistData();
            this.Loading();
        }
    }

    Loading = () => {
        let timer = setTimeout(() => {
            this.setCurState({
                loading: false
            })
            clearTimeout(timer);
        }, 500);
    }

    setCurState = (action) => {
        const { curState } = this.state;
        this.setState({
            curState: {
                ...curState,
                ...action
            }
        });
    }

    setSonglistData = async () => {
        const { data } = this.props;

        this.setState({
            listData: undefined
        })

        if (data && data.music_ids) {
            let ids = data.music_ids;
            let result = await findMusicByids({
                ids: ids.toString()
            })
            this.setState({
                listData: result.data.value
            })
        }
    }

    isShowModal = (option, show) => { // 两个模态框的显示、隐藏
        if (option == 'edit') {
            this.setCurState({
                EditVisible: show
            })
        } else if (option == 'add') {
            this.setCurState({
                AddVisible: show
            })
        }
    }

    delListMusic = async (record) => {
        const { data, setData } = this.props;
        data.music_ids.splice(data.music_ids.indexOf(record.music_id), 1);
        let result = await updateSongList({
            data: {
                list_id: data.list_id,
                music_ids: data.music_ids.toString() || "(Null)",
                song_nums: data.music_ids.length
            }
        })
        if (result.status == 'ok') {
            await setData();
            this.setCurState({
                loading: true
            })
            this.setSonglistData();
            this.Loading();
            message.success("修改成功");
        } else {
            message.error('修改失败：' + result.data.message);
            console.log(result.data.error);
        }
    }

    render() {
        const { data, setData } = this.props;
        const { listData, curState } = this.state;
        const { infoMore, loading, AddVisible, EditVisible } = curState;

        const columns = [
            {
                title: '歌曲标题',
                dataIndex: 'music_name',
                key: 'name',
                hideInSearch: true,
                render: music_name => <a>{music_name}</a>,
            },
            {
                title: '歌手',
                dataIndex: 'singer_name',
                key: 'singer_name',
                hideInSearch: true,
            },
            {
                title: '专辑',
                dataIndex: 'album_name',
                key: 'album_name',
                hideInSearch: true,
            },
            {
                title: '操作',
                valueType: 'option',
                render: (text, record, _, action) => {
                    return [
                        record.is_lock == '-1' ? '' : <a rel="noopener noreferrer" key="del" onClick={() => this.delListMusic(record)}>
                            删除
                        </a>,
                    ]
                },
            }
        ];

        return (
            <div className="songlist-right-detail">
                {
                    data ?
                        <Spin spinning={loading}>
                            <div className="right-detail-body">
                                <div className="right-detail-info">
                                    <div className="background-blur">
                                        <img src={m_config.local + data.list_pic + data.list_pic_name} />
                                    </div>
                                    <div className="info">
                                        <div className="thumbnail">
                                            <Image src={m_config.local + data.list_pic + data.list_pic_name}
                                                onError={(e) => {
                                                    e.target.src = No_head;
                                                }}
                                            />
                                        </div>
                                        <div className="content">
                                            <a className="edit" onClick={() => {
                                                this.setCurState({
                                                    EditVisible: true
                                                })
                                            }}>编辑</a>
                                            <h2 className="title">{data.list_name}</h2>
                                            <div className="playcount">播放量：{(data.list_play_count / 10000).toFixed(1)}万</div>
                                            <div className="tags">
                                                标签：{
                                                    data.tags && data.tags.map((item, index) => {
                                                        return <Tag key={index}>{item}</Tag>
                                                    })
                                                }
                                            </div>
                                            <div className="intro-wrapper">
                                                <div className="intro">
                                                    <a onClick={() => {
                                                        this.setCurState({
                                                            infoMore: !infoMore
                                                        })
                                                    }}>{infoMore ? '收起' : '更多'}</a>
                                                    <div className="intro-span" style={{
                                                        whiteSpace: infoMore ? 'pre-line' : 'nowrap'
                                                    }}>
                                                        {data.list_description}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="right-detail-songlist">
                                    <ProTable
                                        columns={columns}
                                        dataSource={listData}
                                        rowKey="music_id"
                                        search={false} pagination={{
                                            pageSize: 5,
                                        }}
                                        rowClassName={(record, index) => {
                                            return record.is_lock == '-1' ? 'song_islock' : ''
                                        }} dateFormatter="string" headerTitle="歌曲列表" toolBarRender={() => [
                                            <Button key="button" icon={<PlusOutlined />} type="primary" onClick={() => {
                                                this.setCurState({
                                                    AddVisible: true
                                                })
                                            }}>
                                                添加歌曲
                                            </Button>,
                                        ]} />
                                </div>
                            </div>
                        </Spin>
                        : <Result
                            title="您还没有选中歌单"
                            extra={
                                <div></div>
                            }
                        />
                }
                <AddModel
                    isModalVisible={AddVisible}
                    isShowModal={this.isShowModal}
                    initData={data}
                    setData={setData}
                />

                <EditModel
                    isModalVisible={EditVisible}
                    isShowModal={this.isShowModal}
                    initData={data}
                    setData={setData}
                />
            </div >
        );
    }
}

export default Detail;